<template>
  <!-- 消息提示框 -->
    <div class="msg-box" v-if="msgShow" ref="top" :style="setTop">{{msgData}}
    </div>
</template>

<script>
export default {
  data () {
    return {
      msgShow: false,
      msgData: '',
      setTimeoutStatus: 0,
      setTop: 'top:30%'
    }
  },
  methods: {
    timeClose (obj) {
      this.setTop = `top:${obj.top}` || 'top:30%'
      let times = obj.time || 2000
      clearTimeout(this.setTimeoutStatus)
      this.msgShow = true
      this.msgData = obj.msg
      var that = this
      this.setTimeoutStatus = setTimeout(function () {
        that.msgShow = false
      }, times)
    }
  }
}
</script>

<style scoped lang='less'>
.msg-box{
  position: fixed;
  z-index: 9999999999999;
  display: inline-block;
  background-color: #666;
  z-index: 1000;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  padding: .15rem .3rem;
  font-size: .26rem;
  color: #fff;
  border-radius: 5px;
  text-align: center;
}
</style>
